<script setup>
import {ref , onMounted} from 'vue'
import axios from 'axios'

    const userList = ref([])

    const name = ref('')
    const gender = ref('')
    const job = ref('')

    const search = async () => {
        try {
            const url = `https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`
            const response = await axios.get(url)
            userList.value = response.data.data
        } catch (error) {
            console.error('查询失败:', error)
        }
    }
    // 定义清空函数
    const clear = () => {
        name.value = ''
        gender.value = ''
        job.value = ''
        userList.value = []
        search()
    }
onMounted(() => {
    console.log(123)
})
</script>

<template>

<div id="app">

    <div id="center">
	    姓名: <input type="text" name="name" placeholder="请输入姓名" v-model="name">

	    性别:
	    <select name="gender" v-model="gender">
	      <option value="1">男</option>
	      <option value="2">女</option>
	    </select>

	    职位:
	    <select name="job" v-model="job">
	      <option value="1">班主任</option>
	      <option value="2">讲师</option>
	      <option value="3">学工主管</option>
	      <option value="4">教研主管</option>
	      <option value="5">咨询师</option>
	    </select>

	    <button class="btn" type="button" @click="search">查询</button>
	    <button class="btn" type="button" @click="clear">清空</button>
	  </div>
	  
	  <table>
	    <tr>
	      <th>序号</th>
	      <th>姓名</th>
	      <th>头像</th>
	      <th>性别</th>
	      <th>职位</th>
	      <th>入职时间</th>
	      <th>更新时间</th>
	    </tr>

	    <!-- v-for 用于列表循环渲染元素 -->
	    <tr v-for="(user, index) in userList" :key="user.id">
	      <td>{{index + 1}}</td>
	      <td>{{user.name}}</td>
	      <td> <img :src="user.image"> </td>
	      <td>
	        <span v-if="user.gender == 1">男</span>
	        <span v-else-if="user.gender == 2">女</span>
	        <span v-else>其他</span>
	      </td>
	      <td>
	        <span v-if="user.job == 1">班主任</span>
	        <span v-else-if="user.job == 2">讲师</span>
	        <span v-else-if="user.job == 3">学工主管</span>
	        <span v-else-if="user.job == 4">教研主管</span>
	        <span v-else-if="user.job == 5">咨询师</span>
	        <span v-else>其他</span>
	      </td>
	      <td>{{user.entrydate}}</td>
	      <td>{{user.updatetime}}</td>
	    </tr>
	  </table>
    
  </div>

</template>

<style scoped>
    table,th,td {
	    border: 1px solid #949191;
	    border-collapse: collapse;
	    line-height: 50px;
	    text-align: center;
	  }

	  #center,table {
	    width: 60%;
	    margin: auto;
	  }

	  #center {
	    margin-top: 50px;
	    margin-bottom: 20px;
	  }

	  img {
	    width: 50px;
	  }

	  input,select {
	    width: 17%;
	    padding: 10px;
	    margin-right: 30px;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	  }

	  .btn {
	    background-color: #08dcf3;
	    padding: 8px 30px;
	    margin-right: 10px;
	    border-radius: 8px;
	    border: #08dcf3 solid 1px;
	  }
</style>
